<template>
  <div>
    <div class="tab-bar">
      <div @click="popupSorter">排序</div>
      <div @click="popupCondition">筛选</div>
    </div>

    <div class="product-list">
      <productItem v-for="productinfo in productList" :key="productinfo.product_id"
                   :product="productinfo"></productItem>
    </div>
    <div class="spinnerBox" :hidden="footerHide">
      {{loadMoreText}}
      <div class="spinner" v-if="hasMore">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div>
    <sorter v-if="sorterShow" :data="sorterData" :selectSortIndex="currentSortIndex"
            @receiveSorter="changeSorter" @popupSorter="popupSorter"></sorter>
    <placeholder :show.sync="isPageEmpty" :message.sync="emptyMsg" :hidBtn="hidBtn" @tryAgain="onTap" :styleTop="44"/>
  </div>

</template>

<script>
  import {mapState, mapMutations, mapActions} from "vuex";
  import placeholder from '@/components/placeholder'
  import productItem from '@/components/product-item'
  import sorter from '@/components/sorter'
  import tools from '@/store/tools'
  import pullmixin from '@/mixins/PullRefreshLayout'
  import common from '@/utils/common'
  import Arrayutils from '@/utils/arrayutils'
  import {getGoodsList, getGoodsListWithNoProgress} from '@/net/commonapi'
  import {cateAction} from '@/store/funnames'

  export default {
    data() {
      return {
        sorterShow: false,
        productList: [],
        sorterData: [],
        scrollHeight: 0,
        currentSortIndex: 0
      };
    },
    mixins: [pullmixin],
    computed: {
      ...mapState('cate', ['selectFemaleCateList', 'selectBrandList', 'priceData', 'selectManCateList', 'otherPrams', 'word', 'sortType', 'sortId'])
    },
    onLoad() {
      this.scrollHeight = common.getWindowHeight() - 40
      this.getSorter()
    },
    onUnload() {
      this.sorterShow = false
      this.currentSortIndex = 0
      this.updateSort({
        sortType: 1,
        sortId: 1,
      })
    },
    methods: {
      ...mapMutations('cate', {
        updateSort: cateAction.ACTION_SORT_UPDATE
      }),
      onRefresh(isRefresh, showProgress) {
        this.getdata(isRefresh, showProgress)
      },
      popupSorter() {
        this.sorterShow = !this.sorterShow
      },
      async getSorter() {
        const data = await this.$fly.post(this.$url.URL_SORTER)
        if (data.successCode === 1) {
          this.sorterData = data.data
        }
      },
      async getdata(isRefresh, showProgress) {
        let params = tools.getAllCondition({
          selectBrandList: this.selectBrandList,
          selectFemaleCateList: this.selectFemaleCateList,
          selectManCateList: this.selectManCateList,
          otherPrams: this.otherPrams,
          price: this.priceData,
          word: this.word,
          sort_type: this.sortType,
          sort_id: this.sortId,
          search_product_type: this.search_product_type,
          page_index: isRefresh
            ? (this.paramsDatas.pageIndex = 1)
            : this.paramsDatas.pageIndex,
          page_size: this.paramsDatas.pageSize
        })
        const resData = await (showProgress ? getGoodsList(params) : getGoodsListWithNoProgress(params))
        if (resData.successCode) {
          this.preHandler(isRefresh, this.$wx.isArrayEmpty(resData.data.products) ? 0 : resData.data.products.length)
          if (isRefresh) {
            this.productList = resData.data.products
            console.log(this.productList)
            if (this.$wx.isArrayEmpty(this.productList)) {
              this.isPageEmpty = true
              this.hidBtn = true
              this.emptyMsg = "很抱歉，没有找到想要的商品"
            } else {
              this.isPageEmpty = false
            }
          } else {
            this.productList.push.apply(this.productList, resData.data.products)
          }
        } else {
          this.handlerFail(isRefresh, resData)
        }
      },
      changeSorter(val) {
        this.sorterShow = false;
        this.currentSortIndex = Arrayutils.findIndex(this.sorterData, val)
        this.updateSort({
          sortType: val.sort_type,
          sortId: val.sort_id,
        })
        this.productList = []
        this.onRefresh(true)
      },
      popupCondition() {
        this.$wx.jumper('../categorysinner/main')
      },
      onTap() {
        this.onRefresh(true)
      },
    },
    mounted() {
      this.$wx.setTitleBarTitle("筛选")
      this.getdata(true)
    },
    onShow() {
      if (this.$wx.isArrayEmpty(this.$root.$eventHub._events.requestGoods)) {
        this.$root.$eventHub.$on('requestGoods', (target) => {
          this.onRefresh(target, false)
        });
      }
    },
    destroyed() {
      this.$root.$eventHub.$off('requestGoods')
    },
    components: {
      productItem,
      sorter,
      placeholder
    }
  };
</script>

<style scoped>

</style>
